import { defineView } from "@/routers/tools.mjs";

// # MARK: main view
const uibModalView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.IScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
    }

    handleClick() {
      console.log(this.$scope);
    }
  },
  controllerAs: "$uibModalCtrl",
  template: /* HTML */ html`
    <div ng-controller="ModalDemoCtrl as $modalDemo" class="modal-demo">
      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.open()"
      >
        Open me!
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.open('lg')"
      >
        Large modal
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.open('sm')"
      >
        Small modal
      </button>
      <hr />

      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.open('sm', '.modal-parent')"
      >
        Modal appended to a custom parent
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.toggleAnimation()"
      >
        Toggle Animation ({{ $modalDemo.animationsEnabled }})
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.openComponentModal()"
      >
        Open a component modal!
      </button>
      <hr />

      <button
        type="button"
        class="btn btn-default"
        ng-click="$modalDemo.openMultipleModals()"
      >
        Open multiple modals at once
      </button>
      <div ng-show="$modalDemo.selected">
        Selection from a modal: {{ $modalDemo.selected }}
      </div>
      <div class="modal-parent"></div>
      <hr />
      <button ng-click="$modalDemo.handleClick()">this.$scope</button>
    </div>
  `,
});

export default uibModalView;
